<template>
  <div class="index">
    <headers class="header-with-transition"></headers>
    
    <!-- 轮播图部分 -->
    <el-carousel 
      height="600px" 
      class="hero-carousel"
      indicator-position="outside"
    >
      <el-carousel-item v-for="(item,index) in rotations" :key="index" class="carousel-item">
        <div class="carousel-content" :style="{backgroundImage: `url(${$store.state.HOST + item.image})`}">
          <div class="carousel-overlay"></div>
          <div class="carousel-text">
            <h2 class="fade-in">探索美好旅程</h2>
            <p class="fade-in-delay">发现令人惊叹的景点和难忘的体验</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 推荐景点部分 -->
    <section class="section attractions-section">
      <div class="container">
        <h2 class="section-title">推荐景点</h2>
        <div class="attractions-grid">
          <div 
            v-for="(item,index) in attractions" 
            :key="index"
            class="attraction-card"
          >
            <div class="card-image-wrapper">
              <img :src="item.images.split(',')[0]" :alt="item.name">
            </div>
            <div class="card-content">
              <h3>{{item.name}}</h3>
              <p>{{item.introduce}}</p>
              <el-button 
                type="primary" 
                class="book-btn"
                @click="toInfo(item.id)"
              >
                立即预约
              </el-button>
            </div>
          </div>
        </div>
        <el-button 
          type="primary" 
          plain
          @click="toAttraction"
          class="view-more-btn"
        >
          查看更多景点
        </el-button>
      </div>
    </section>

    <!-- 游客统计 -->
    <div class="visitor-stats">
      <div class="counter-wrapper">
        <span class="counter-number">{{count}}</span>
        <h3>全年总接待游客量</h3>
      </div>
    </div>

    <!-- 旅游路线部分 -->
    <section class="section routes-section">
      <div class="container">
        <h2 class="section-title">精选路线</h2>
        <div class="routes-grid">
          <div 
            v-for="(item,index) in line" 
            :key="index"
            class="route-card"
          >
            <div class="route-image">
              <img :src="item.images.split(',')[0]" :alt="item.name">
            </div>
            <div class="route-content">
              <h3>{{item.name}}</h3>
              <p>{{item.introduce}}</p>
              <el-button 
                type="primary"
                @click="toLineInfo(item.id)"
              >
                查看详情
              </el-button>
            </div>
          </div>
        </div>
        <el-button 
          type="primary" 
          plain
          @click="toLine"
          class="view-more-btn"
        >
          查看更多路线
        </el-button>
      </div>
    </section>

    <bottoms></bottoms>
  </div>
</template>

<script>
import {getSysRotationsList, getSysAttractionsIndex, getUserCount, getSysLineIndex} from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  name: 'Index',
  components: {
    headers,
    bottoms
  },
  data() {
    return {
      rotations: [],
      attractions: [],
      count: 0,
      line: []
    }
  },
  methods: {
    // 导航方法
    toAttraction() {
      this.$router.push("/attractions")
    },
    toLine() {
      this.$router.push("/line")
    },
    toInfo(id) {
      this.$router.push("/attractionsInfo?id=" + id)
    },
    toLineInfo(id) {
      this.$router.push("/lineInfo?id=" + id)
    },

    // API 调用方法
    async getSysRotationsList() {
      try {
        const res = await getSysRotationsList()
        if (res.code === 1000) {
          this.rotations = res.data
        }
      } catch (error) {
        console.error('获取轮播图失败:', error)
      }
    },
    async getSysAttractionsIndex() {
      try {
        const res = await getSysAttractionsIndex()
        if (res.code === 1000) {
          this.attractions = res.data
        }
      } catch (error) {
        console.error('获取推荐景点失败:', error)
      }
    },
    async getUserCount() {
      try {
        const res = await getUserCount()
        if (res.code === 1000) {
          this.count = res.data
        }
      } catch (error) {
        console.error('获取游客数量失败:', error)
      }
    },
    async getSysLineIndex() {
      try {
        const res = await getSysLineIndex()
        if (res.code === 1000) {
          this.line = res.data
        }
      } catch (error) {
        console.error('获取旅游路线失败:', error)
      }
    }
  },
  mounted() {
    this.getSysRotationsList()
    this.getSysAttractionsIndex()
    this.getUserCount()
    this.getSysLineIndex()
  }
}
</script>

<style scoped>
.index {
  min-height: 100vh;
}

/* 轮播图样式 */
.hero-carousel {
  margin-bottom: 60px;
}

.carousel-content {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
}

.carousel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}

/* 通用部分样式 */
.section {
  padding: 60px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2em;
  color: #333;
}

/* 景点卡片样式 */
.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.attraction-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.attraction-card:hover {
  transform: translateY(-10px);
}

.card-image-wrapper {
  height: 220px;
  overflow: hidden;
}

.card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

/* 游客统计样式 */
.visitor-stats {
  height: 300px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 60px 0;
}

.counter-wrapper {
  text-align: center;
}

.counter-number {
  font-size: 4em;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
}

/* 路线卡片样式 */
.routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.route-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.route-card:hover {
  transform: translateY(-10px);
}

.view-more-btn {
  display: block;
  margin: 0 auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .section {
    padding: 40px 0;
  }
  
  .attractions-grid,
  .routes-grid {
    grid-template-columns: 1fr;
  }
  
  .counter-number {
    font-size: 3em;
  }
}


/* 精选路线模块优化 */
.routes-section {
  background-color: #f8f9fa;
  padding: 80px 0;
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 50px;
}

.route-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  height: 100%;
}

.route-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.route-image {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.route-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.route-card:hover .route-image img {
  transform: scale(1.1);
}

.route-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  pointer-events: none;
}

.route-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.route-content h3 {
  font-size: 1.4em;
  color: #2c3e50;
  margin-bottom: 15px;
  font-weight: 600;
}

.route-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-content .el-button {
  align-self: flex-start;
  padding: 10px 25px;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.route-content .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.routes-section .view-more-btn {
  padding: 12px 35px;
  font-size: 1.1em;
  border-radius: 30px;
  margin-top: 40px;
  background: transparent;
  border: 2px solid #409EFF;
  color: #409EFF;
  font-weight: 500;
}

.routes-section .view-more-btn:hover {
  background: #409EFF;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(64,158,255,0.3);
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .routes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .routes-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .route-image {
    height: 200px;
  }
  
  .route-content {
    padding: 20px;
  }
  
  .route-content h3 {
    font-size: 1.2em;
  }
}

</style>